<script setup lang="ts">
import { formatDate } from '@/utils/format'

const appStore = useAppStore()
</script>

<template>
  <div class="user-info-container">
    <i-icons-avatar class="size-12!" />
    <div class="flex flex-col space-y-2">
      <span class="text-base font-700">您好，{{ appStore.adminInfo?.username }}</span>
      <div class="flex items-center text-xs text-color-2 space-x-4">
        <div>
          最近登录IP<span class="pl-1 text-color-1">
            {{ appStore.adminInfo?.login_ip || '-' }}</span>
        </div>
        <div>
          所在地<span class="pl-1 text-color-1">
            {{ appStore.adminInfo?.login_addr || '-' }}</span>
        </div>
        <div>
          登录时间<span class="pl-1 text-color-1">
            {{ formatDate(Number(appStore.adminInfo?.login_at)) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.user-info-container {
  border: 1px solid var(--white, #fff);
  backdrop-filter: blur(5px);
  @apply w-full rounded-xl bg-white/60 flex p-6 space-x-4;
}
</style>
